<template>
  <div class="vipCenter">
    <div class="nav">
      <img class="bgimg" src="../assets/image/组 11@2x.png" alt="" />
      <div class="container">
        <img class="avar" :src="obj.headimg" alt="" />
        <ul class="personMsg">
          <li class="name">
            {{ obj.nickName }}
            <img
              v-if="obj.epithet == '月度'"
              src="../assets/image/VIP_月@2x.png"
              alt=""
            />
            <img
              v-if="obj.epithet == '季度'"
              src="../assets/image/VIP_度@2x.png"
              alt=""
            />
            <img
              v-if="obj.epithet == '年度'"
              src="../assets/image/VIP_年@2x.png"
              alt=""
            />
            <img
              v-if="obj.epithet == '三天'"
              src="../assets/image/VIP_3@2x.png"
              alt=""
            />
          </li>
          <li class="vip">
            您当前的VIP级别为：{{ obj.vip == "1" ? obj.epithet : "未开通" }}
          </li>
          <li class="time" v-if="obj.vipTime != '0'">
            会员总时长：
            <span class="item1">{{ obj.vipTime | time }}</span>
            <span
              v-if="
                Math.floor(
                  (obj.vipTime * 1000 - timer) / 1000 / 60 / 60 / 24
                ) >= 0
              "
              >(剩余{{
                Math.floor((obj.vipTime * 1000 - timer) / 1000 / 60 / 60 / 24)
              }}天)</span
            >
            <span v-else>(已过期)</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="main">
      <p class="title">套餐开通</p>
      <div class="card">
        <!-- 安卓 -->
        <div
          v-show="arr.legth != 0"
          class="yearCard monthCard"
          v-for="(item, index) in arr"
          :key="index"
          @click="checks(item, index)"
          :class="index == activeName ? 'activeStyle' : ''"
        >
          <div v-if="item.title == '年度'" class="head">推荐开通</div>
          <p class="cardStyle">{{ item.title }}</p>
          <p>
            ￥<span class="price">{{ item.price }}</span>
          </p>
          <p class="active">
            <span
              class="dele"
              :style="index == activeName ? 'color:#483123' : 'color:#a6a6a7'"
              >{{ item.oldAmount }}</span
            ><span>{{ item.label }}</span>
          </p>
        </div>

        <!-- ios -->
        <div
          v-show="newArr.legth != 0"
          class="yearCard monthCard"
          v-for="(item, index) in newArr"
          :key="index"
          @click="check(item, index)"
          :class="index == activeName ? 'activeStyle' : ''"
        >
          <div v-if="item.title == '年度'" class="head">推荐开通</div>
          <p class="cardStyle">{{ item.title }}</p>
          <p>
            ￥<span class="price">{{ item.amount }}</span>
          </p>
          <p class="active">
            <span
              class="dele"
              :style="index == activeName ? 'color:#483123' : 'color:#a6a6a7'"
              >{{ item.oldAmount }}</span
            ><span>{{ item.discounts }}</span>
          </p>
        </div>
      </div>
      <!-- 安卓支付方式 -->
      <div class="payType" v-if="arr.length > 0">
        <div
          class="item"
          @click="selectedB(2)"
          :class="{ actived: activeB == 2 }"
        >
          <div class="li">
            <div class="left">
              <img src="../assets/image/wxpay.png" alt="" />
              微信
            </div>
            <div class="right" v-if="activeB == 1"></div>
            <img v-else src="../assets/image/gougou.png" alt="" />
          </div>
        </div>
        <div
          class="item"
          @click="selectedB(1)"
          :class="{ actived: activeB == 1 }"
        >
          <div class="li">
            <div class="left">
              <img src="../assets/image/alpay.png" alt="" />
              支付宝
            </div>
            <div class="right" v-if="activeB == 2"></div>
            <img v-else src="../assets/image/gougou.png" alt="" />
          </div>
        </div>
      </div>
      <div class="btn" @click="submit">
        <!-- {{ obj.vip == "1" ? "立即续费" : "立即开通" }} -->
        立即续费
      </div>
      <p class="title">会员特权</p>
      <ul class="msg">
        <!-- <li>
          <div class="msgPic">
            <img src="../assets/image/组 16@2x.png" alt="" />
          </div>
          <div class="content">
            <p>通话半价</p>
            <p class="lastChild">尊享通话优惠，畅聊更嗨皮</p>
          </div>
        </li> -->
        <!-- <li>
          <div class="msgPic">
            <img src="../assets/image/组 16@2x(1).png" alt="" />
          </div>
          <div class="content">
            <p>条件筛选</p>
            <p class="lastChild">选择偏好类型，匹配更精准</p>
          </div>
        </li> -->
        <li>
          <div class="msgPic">
            <img src="../assets/image/组 16@2x(2).png" alt="" />
          </div>
          <div class="content">
            <p>优先匹配</p>
            <p class="lastChild">更快匹配用户，畅聊每一秒</p>
          </div>
        </li>
        <li>
          <div class="msgPic">
            <img src="../assets/image/推荐@2x.png" alt="" />
          </div>
          <div class="content">
            <p>优先推荐</p>
            <p class="lastChild">时刻保持前排，抢人更快捷</p>
          </div>
        </li>
        <li>
          <div class="msgPic">
            <img src="../assets/image/关注@2x.png" alt="" />
          </div>
          <div class="content">
            <p>关注功能</p>
            <p class="lastChild">关注心仪对象，动态尽掌握</p>
          </div>
        </li>
        <li>
          <div class="msgPic">
            <img src="../assets/image/钻石@2x.png" alt="" />
          </div>
          <div class="content">
            <p>会员标识</p>
            <p class="lastChild">会员专属标识，吸引力更高</p>
          </div>
        </li>
        <li>
          <div class="msgPic">
            <img src="../assets/image/客服@2x.png" alt="" />
          </div>
          <div class="content">
            <p>专属客服</p>
            <p class="lastChild">会员专属客服，回复更及时</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- <img class="imgUrl" src="../assets/image/VIP_月@2x.png" alt="" /> -->
  </div>
</template>

<script>
import { getAppToken } from "@/utils/getAppToken";
import { openVip_api, userUserinfo, openVipIos_api } from "@/api/reply.js";
export default {
  data() {
    return {
      arr: [
        // { card: "年卡", price: "30", dele: "￥54", dele1: "24" },
        // { card: "季卡", price: "30", dele: "￥54", dele1: "24" },
        // { card: "月卡", price: "80", dele: "￥54", dele1: "24" },
      ],
      newArr: [],
      isshow: false,
      activeName: "0",
      obj: {},
      timer: new Date().getTime(),
      iosObj: { amount: "", goodsId: "", prepaid: "" },
      activeB: "1",
      androidObj: { type: "1", id: "" },
    };
  },
  created() {
    getAppToken().then(() => {
      this.getMsg();
      this.vipList();
    });
  },

  methods: {
    check(item, index) {
      this.activeName = index;
      this.iosObj.amount = item.amount;
      this.iosObj.goodsId = item.goodsId;
      this.iosObj.prepaid = item.prepaid;
    },
    checks(item, index) {
      this.activeName = index;
      this.androidObj.id = item.id;
    },
    selectedB(i) {
      this.activeB = i;
      this.androidObj.type = i;
    },
    // 获取用户信息
    async getMsg() {
      // localStorage.setItem(
      //   "access_token",
      //   "Bfo9flop4VNJ_HNPFTbbA_S-LspOt9U2FoSOE5C5ruE.6TmtdixRzL4ukjMON0cY0vDnxSpM7_RAzinNEqhwkbcCHpQp-xAxcfqJLYd5O77_J7uJxhbaIbd2-rtTLdSnTSpoQitYr6Nfzi2voZh9ycreTyBULqzCHy98BZYbq9_ETrO0Crv4by_JWI_cUsxMRisIIUoX0LlR1k9ItBES-MVrIj1gzuC3pa2YzZuj4j9s4mu76VxJSaRNIENK0Y9FBg.xecqiwpNqGjmOO8ztlKy3vf0nYlEXowVEEBY_Hyc6qZH-nAR4HpgiRrpDzc5H1B4"
      // );
      let { code, data } = await userUserinfo({});
      if (code == 0) {
        console.log(data);
        this.obj = data;
      }
    },
    // 获取充值套餐安卓
    async getVipList() {
      // localStorage.setItem(
      //   "access_token",
      //   "Bfo9flop4VNJ_HNPFTbbA_S-LspOt9U2FoSOE5C5ruE.6TmtdixRzL4ukjMON0cY0vDnxSpM7_RAzinNEqhwkbcCHpQp-xAxcfqJLYd5O77_J7uJxhbaIbd2-rtTLdSnTSpoQitYr6Nfzi2voZh9ycreTyBULqzCHy98BZYbq9_ETrO0Crv4by_JWI_cUsxMRisIIUoX0LlR1k9ItBES-MVrIj1gzuC3pa2YzZuj4j9s4mu76VxJSaRNIENK0Y9FBg.xecqiwpNqGjmOO8ztlKy3vf0nYlEXowVEEBY_Hyc6qZH-nAR4HpgiRrpDzc5H1B4"
      // );
      let { code, data } = await openVip_api({
        type: 2,
      });
      if (code == 0) {
        console.log(data, "安卓");
        this.arr = data;
        this.androidObj.id = this.arr[0].id;
        // this.androidObj.type = this.activeB;
      }
    },
    // 获取充值套餐IOS
    async getVipIos() {
      // localStorage.setItem(
      //   "access_token",
      //   "Bfo9flop4VNJ_HNPFTbbA_S-LspOt9U2FoSOE5C5ruE.6TmtdixRzL4ukjMON0cY0vDnxSpM7_RAzinNEqhwkbcCHpQp-xAxcfqJLYd5O77_J7uJxhbaIbd2-rtTLdSnTSpoQitYr6Nfzi2voZh9ycreTyBULqzCHy98BZYbq9_ETrO0Crv4by_JWI_cUsxMRisIIUoX0LlR1k9ItBES-MVrIj1gzuC3pa2YzZuj4j9s4mu76VxJSaRNIENK0Y9FBg.xecqiwpNqGjmOO8ztlKy3vf0nYlEXowVEEBY_Hyc6qZH-nAR4HpgiRrpDzc5H1B4"
      // );
      let { code, data } = await openVipIos_api({
        type: 2,
      });
      if (code == 0) {
        console.log(data, "ios");
        this.newArr = data;
        this.iosObj.amount = this.newArr[0].amount;
        this.iosObj.goodsId = this.newArr[0].goodsId;
        this.iosObj.prepaid = this.newArr[0].prepaid;
      }
    },
    // 续费套餐
    vipList() {
      //判断环境
      var u = navigator.userAgent;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端或者uc浏览器
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
        console.log("当前安卓环境");
        this.getVipList();
        // 调用安卓app方法通知app刷新token并回调本地方法
        // window.android.getToken();
      } else if (isiOS) {
        console.log("当前IOS环境");
        this.getVipIos();
        // 调用苹果app方法通知app刷新token并回调本地方法
        // window.webkit.messageHandlers.getToken.postMessage("获取token");
      }
      //注册挂载全局方法等待app回调后resolve就可进行操作了
    },
    // 确认开通
    submit() {
      //判断环境
      var u = navigator.userAgent;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端或者uc浏览器
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
        console.log("当前安卓环境");
        // console.log(this.androidObj, "555");
        window.android.openVips(JSON.stringify(this.androidObj));
        // 调用安卓app方法通知app刷新token并回调本地方法
        // window.android.getToken();
      } else if (isiOS) {
        console.log("当前IOS环境");
        // console.log(this.iosObj, "9999");
        window.webkit.messageHandlers.openVip.postMessage(
          JSON.stringify(this.iosObj)
        );
        // 调用苹果app方法通知app刷新token并回调本地方法
        // window.webkit.messageHandlers.getToken.postMessage("获取token");
      }
      //注册挂载全局方法等待app回调后resolve就可进行操作了
    },
  },
  filters: {
    //时间转化
    time: (value) => {
      if (!value) return "";
      let value1 = value * 1000;
      var date = new Date(value1);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      // var hh =
      //   (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      // var mm =
      //   (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
      //   ":";
      // var ss =
      //   date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD; //+ " " + hh + mm + ss;
    },
  },
};
</script>

<style lang="less" scoped>
.vipCenter {
  width: 100%;
  min-height: 100%;
  padding: 10px 0;
  background: linear-gradient(90deg, #2c3148 0%, #35384c 100%);
  overflow: hidden;
  .nav {
    width: 100%;
    height: 170px;
    // background: url("../assets/image/组 11@2x.png") no-repeat;
    // background-size: 100% 100%;
    // background-position-x: 50px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 15px;
    position: relative;
    // overflow: hidden;
    .bgimg {
      width: 280px;
      // height: 200px;
      position: absolute;
      left: 110px;
      top: 20px;
      // z-index: 0;
      // top: 0;
    }
    .container {
      width: 90%;
      margin: 15px auto;
      display: flex;
      align-items: center;
      z-index: 1;
      .avar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin: 15px;
        object-fit: cover;
      }
      .personMsg {
        li {
          list-style: none;
          margin: 5px 0;
        }
        .name {
          font-weight: bold;
          color: #ffffff;
          line-height: 35px;
          font-size: 15px;
          display: flex;
          align-items: center;
          img {
            width: 40px;
            height: 16px;
            margin-left: 5px;
            // border-radius: 50%;
          }
        }
        .vip {
          font-size: 13px;
          font-weight: 400;
          color: #ffffff;
        }
        .time {
          font-size: 12px;
          font-weight: 400;
          color: #9a9ea7;
          .item1 {
            color: #f3cf9e;
          }
        }
      }
    }
  }
  .main {
    width: 90%;
    margin: 15px auto;
    .title {
      font-size: 23px;
      font-weight: bold;
      color: #e5cbb3;
      margin: 5px;
    }
    .card {
      margin: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .activeStyle {
        color: #483123 !important;
        border-image: linear-gradient(0deg, #bf9676, #be9676) 10 10;
        background: linear-gradient(0deg, #efcfa9 0%, #fbe7cf 100%);
        border: 4px solid #bf9676;
        box-sizing: border-box;
      }
      .yearCard {
        position: relative;
        .head {
          width: 65%;
          height: 25px;
          line-height: 25px;
          color: #fff;
          font-weight: 400;
          position: absolute;
          top: -18px;
          left: -2px;
          background: #be9676;
          border-radius: 4px;
          text-align: center;
        }
      }
      div {
        width: 31%;
        height: 160px;
        margin-top: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        background: linear-gradient(0deg, #2e2f41 0%, #464b5e 100%);
        border-radius: 14px;
        color: #eecea7;
        .cardStyle {
          font-size: 20px;
          font-weight: bold;
        }
        .price {
          font-size: 25px;
          font-weight: 400;
        }
        .active {
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 38px;
          // justify-content: space-around;
          .dele {
            text-decoration: line-through;
            color: #a6a6a7;
            font-size: 15px;
          }
        }
      }
    }
    .payType {
      display: flex;
      justify-content: space-between;
      .item {
        width: 155px;
        height: 44px;
        border-radius: 22px;
        border: 2px solid #ccc;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .li {
          display: flex;
          width: 150px;
          justify-content: space-between;
          .left {
            margin-left: 20px;
            display: flex;
            align-items: center;

            img {
              width: 20px;
              height: 20px;
              margin-right: 6px;
            }
            font-size: 15px;
            color: #fff;
          }
          .right {
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            border-radius: 50%;
            margin-right: 10px;
          }
          img {
            width: 21px;
            height: 21px;
            margin-right: 10px;

            // background: #8a37f8;
          }
        }
      }
      .actived {
        border-color: #efcfa9 !important;
      }
    }

    .btn {
      margin: 15px 0;
      width: 100%;
      height: 45px;
      line-height: 45px;
      background: linear-gradient(90deg, #eec28d 0%, #fae8d0 100%);
      border-radius: 22.5px;
      text-align: center;
      font-size: 17px;
      font-weight: 500;
      color: #483122;
    }
    .msg {
      margin-bottom: 20px;
      li {
        list-style: none;
        display: flex;
        margin: 10px 0;
        .msgPic {
          width: 45px;
          height: 45px;
          // border: 1px dashed #483122;
          margin-right: 40px;
          margin-left: 10px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .content {
          font-weight: 400;
          color: #e5cbb3;
          font-size: 18px;
          .lastChild {
            font-size: 12px;
          }
        }
      }
    }
  }
}
.actived {
  border-color: #efcfa9 !important;
}
// .imgUrl {
//   width: 80px;
//   height: 32px;
// }
</style>